<template>
  <div class="container">
    <v-header :seller="seller"></v-header>
    <div class="tab">
      <div class="tab-item"><a v-link="{ path: '/goods' }">商品</a></div>
      <div class="tab-item"><a v-link="{ path: '/seller' }">商家</a></div>
      <div class="tab-item"><a v-link="{ path: '/ratings' }">评论</a></div>
    </div>
    <router-view :seller="seller" keep-alive></router-view>
  </div>
</template>

<script>
  import Header from './components/header/header'
  import { urlParse } from './assets/scripts/util'
  
  const ERR_NO = 0
  
  export default {
    data() {
      return {
        seller: {
          id:(() => {
            let queryParams = urlParse()
            return queryParams.id
          })()
        }
      }
    },
    created() {
      this.$http.get('/api/seller?id=' + this.seller.id).then((response) => {
        response = response.body
        if(response.errno === ERR_NO){
          // this.seller = response.data

          this.seller = Object.assign({}, this.seller, response.data)
        }
      })
    },
    components: {
      'v-header': Header
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import 'assets/style/index.stylus'
  .container
    .tab
      display: flex
      width: 100%
      height: 40px
      .tab-item
        flex: 1
        line-height: 40px
        font-size: 14px
        text-align: center
        color: rgb(77,85,93)
        border-1px(rgba(7, 17, 27, .1))
        a.active
          display: block
          border-1px(rgb(240,20,20))
          color: rgb(240, 20, 20)
</style>